<template>
  <van-nav-bar title="商品详情" left-text="返回">
    <template #left>
      <van-icon name="arrow-left" size="18" @click="$router.back()" />
    </template>
    <template #right>
      <van-icon name="ellipsis" size="18" />
    </template>
  </van-nav-bar>
  <div class="content">
    <img style="width: 100%" :src="info.goodsCarouselList" alt="" />
    <p class="goodsName">{{ info.goodsName }}</p>
    <p class="express">免邮费，顺丰快递</p>
    <p class="money">￥{{ info.sellingPrice }}</p>
    <ul>
      <li>概述</li>
      <li>参数</li>
      <li>安装服务</li>
      <li class="li_right">常见问题</li>
    </ul>
    <div v-html="info.goodsDetailContent" class="rich_text"></div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :badge="store.cartNum"
      @click="$router.push('/cart')"
    />
    <van-action-bar-button type="warning" text="加入购物车" @click="add" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { getinfodata } from "@/api/index.js";
import { useRoute, useRouter } from "vue-router";
import { addcart } from "@/api/index.js";
import { showSuccessToast, showFailToast } from "vant";
import { useCart } from "@/store/store.js";
let store = useCart();
let route = useRoute();
let router = useRouter();
let info = reactive({});
onMounted(() => {
  store.getmycartlist();
  getinfodata(route.params.productid).then((res) => {
    let { data } = res;
    for (let key in data) {
      info[key] = data[key];
    }
  });
});
let add = () => {
  addcart(1, route.params.productid).then((res) => {
    if (res.resultCode == 200) {
      showSuccessToast("添加成功");
      store.getmycartlist();
    } else {
      showFailToast(res.message);
    }
  });
};
</script>
<style lang="less" scoped>
.van-nav-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  padding: 0 0.26667rem;
  margin-top: 46px;
  margin-bottom: 50px;
  .goodsName {
    font-size: 0.48rem;
    text-align: left;
    color: #333;
  }
  .express {
    font-size: 0.37333rem;
    text-align: left;
    color: #999;
    padding: 0.13333rem 0;
  }
  .money {
    color: #f63515;
    font-size: 0.58667rem;
    text-align: left;
  }
  ul {
    display: flex;
    justify-content: center;
    margin: 0.69333rem 0;
    li {
      flex: 1;
      padding: 0.13333rem 0;
      text-align: center;
      font-size: 0.4rem;
      border-right: 0.02667rem solid #999;
      box-sizing: border-box;
    }
    .li_right {
      border: none;
    }
  }
  .rich_text {
    width: 100%;
  }
}
</style>
